﻿@using WebApp.Models
@model IEnumerable<ApplicationUser>
@{
  /**/

  ViewBag.Title = "登录用户管理";
}

<!-- MAIN CONTENT -->
<div id="content">
  <!-- quick navigation bar -->
  <div class="row">
    <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
      <h1 class="page-title txt-color-blueDark">
        <i class="fa fa-table fa-fw "></i>
        系统管理
        <span>
          >
          系统登录账号
        </span>
      </h1>
    </div>
    <div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">

    </div>
  </div>
  <!-- end quick navigation bar -->
  <!-- widget grid -->
  <section id="widget-grid" class="">
    <!-- row -->
    <div class="row">
      <!-- NEW WIDGET START -->
      <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <!-- Widget ID (each widget will need unique ID)-->
        <div class="jarviswidget" id="wid-id-4" data-widget-editbutton="false">
          <!-- widget options:
          usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
          data-widget-colorbutton="false"
          data-widget-editbutton="false"
          data-widget-togglebutton="false"
          data-widget-deletebutton="false"
          data-widget-fullscreenbutton="false"
          data-widget-custombutton="false"
          data-widget-collapsed="true"
          data-widget-sortable="false"
          -->
          <header>
            <span class="widget-icon"> <i class="fa fa-table"></i> </span>
            <h2>系统登录账号</h2>
          </header>

          <!-- widget div-->
          <div>
            <!-- widget edit box -->
            <div class="jarviswidget-editbox">
              <!-- This area used as dropdown edit box -->
            </div>
            <!-- end widget edit box -->
            <!-- widget content -->
            <div class="widget-body no-padding">

              <div class="widget-body-toolbar">
                <div class="row">
                  <div class="col-sm-8  ">
                    <div class="btn-group">
                      <a href="javascript:resetpassword()" class="btn btn-sm btn-primary"> <i class="fa fa-key"></i> 重置密码 </a>
                    </div>
                    <div class="btn-group">
                      <a href="javascript:append()" class="btn btn-sm btn-default"> <i class="fa fa-plus"></i> 新增 </a>
                    </div>
                    <div class="btn-group">
                      <a href="javascript:removeit()" class="btn btn-sm btn-default"> <i class="fa fa-trash-o"></i> 删除 </a>
                    </div>
                    <div class="btn-group">
                      <a href="javascript:accept()" class="btn btn-sm btn-default"> <i class="fa fa-floppy-o"></i> 保存 </a>
                    </div>
                    <div class="btn-group">
                      <a href="javascript:reload()" class="btn btn-sm btn-default"> <i class="fa fa-refresh"></i> 刷新 </a>
                    </div>
                    <div class="btn-group">
                      <a href="javascript:reject()" class="btn btn-sm btn-default"> <i class="fa fa-window-close-o"></i> 取消 </a>
                    </div>

                    <div class="btn-group">
                      <a href="javascript:dohelp()" class="btn btn-sm btn-default"> <i class="fa fa-question-circle-o"></i> 帮助 </a>
                    </div>
                  </div>
                  <div class="col-sm-4 text-align-right">
                    <div class="btn-group">
                      <a href="javascript:window.history.back()" class="btn btn-sm btn-success"> <i class="fa fa-chevron-left"></i> 返回 </a>
                    </div>
                  </div>
                </div>

              </div>
              <div class="alert alert-warning no-margin fade in">
                <button class="close" data-dismiss="alert">
                  ×
                </button>
                <i class="fa-fw fa fa-info"></i>
                注意事项：
              </div>


              <!--begin datagrid-content -->
              <div class="table-responsive">


                <table id="users_datagrid"></table>


              </div>
              <!--end datagrid-content -->

            </div>
            <!-- end widget content -->
          </div>
          <!-- end widget div -->

        </div>
        <!-- end widget -->

      </article>
      <!-- WIDGET END -->

    </div>

    <!-- end row -->
  </section>
  <!-- end widget grid -->

  @Html.Partial("_ResetPasswordPartial")
</div>
<!-- END MAIN CONTENT -->

@section Scripts {
  <script type="text/javascript">
    function downloadtemplate() {

    }
                            //打印
    function print() {
        $dg.datagrid('print', 'DataGrid');
    }
                            //打开Excel上传导入
    function importexcel() {

    }
                            //执行Excel到处下载
    function exportexcel() {

    }
                            //显示帮助信息
    function dohelp() {

    }
    function resetpassword() {
        var row = $dg.datagrid('getChecked');
        if (row.length === 0) {
            $.messager.alert("提示", "请选中需要重置密码的记录!");
        } else {
            //console.log(row);
            showresetform(row[0].Id, row[0].UserName);
        }
    }
    function reload() {
        $dg.datagrid('reload');
    }

                            var $dg = $('#users_datagrid');
                            var editIndex = undefined;
    function endEditing() {
        if (editIndex == undefined) { return true }
        if ($dg.datagrid('validateRow', editIndex)) {
            $dg.datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
    function onClickCell(index, field) {
        if (editIndex != index) {
            if (endEditing()) {
                editIndex = index;
                $dg.datagrid('selectRow', index)
                    .datagrid('beginEdit', index);
                var ed = $dg.datagrid('getEditor', { index: index, field: field });
                if (ed) {
                    ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
                }
            } else {
                $dg.datagrid('selectRow', editIndex);
            }
        }
    }
    function append() {
        if (endEditing()) {
            $dg.datagrid("insertRow",
                {
                    index: 0,
                    row: {
                      CompanyCode: 1,
                      AccountType:1,
                      AvatarsX50:'male1'
                    }
                });
          editIndex = 0;
          $dg.datagrid('selectRow', editIndex)
            .datagrid('beginEdit', editIndex);
        }
    }
    function removeit() {
        if (editIndex == undefined) { return }
        $dg.datagrid('cancelEdit', editIndex)
            .datagrid('deleteRow', editIndex);
        editIndex = undefined;
    }
    function accept() {
        if (endEditing()) {
            if ($dg.datagrid('getChanges').length) {
                var inserted = $dg.datagrid('getChanges', "inserted");
                var deleted = $dg.datagrid('getChanges', "deleted");
                var updated = $dg.datagrid('getChanges', "updated");
                var effectRow = new Object();
                if (inserted.length) {
                    effectRow.inserted = inserted;
                }
                if (deleted.length) {
                    effectRow.deleted = deleted;
                }
                if (updated.length) {
                    effectRow.updated = updated;
                }
                //console.log(JSON.stringify(effectRow));
                $.post("/AccountManage/SaveData", effectRow, function (response) {
                    if (response.success) {
                        $.messager.alert("提示", "提交成功！");
                        $dg.datagrid('acceptChanges');
                        //$dg.datagrid('reload');
                    }
                }, "json").fail(function () {
                    $.messager.alert("错误", "提交错误了！", 'error');

                });

            }

            $dg.datagrid('acceptChanges');
        }
    }
    function reject() {
        $dg.datagrid('rejectChanges');
        editIndex = undefined;
    }
    function getChanges() {
        var rows = $dg.datagrid('getChanges');
        alert(rows.length + ' rows are changed!');
    }


    $(function () {
      $dg.datagrid({
        rownumbers: true,
        checkOnSelect: true,
        selectOnCheck: true,
        idField: 'Id',
        sortName: 'Id',
        sortOrder: 'desc',
        remoteFilter: true,
        singleSelect: true,

        url: '/AccountManage/GetData',
        method: 'get',
        onClickCell: onClickCell,
        pagination: true,
        striped: true,
        columns: [[
          { field: 'ck', checkbox: true },
          {
            field: 'UserName',
            title: '<span class="required">账号名称</span>',
            width: 140,
            editor: {
              type: 'textbox',
              options: { prompt: '@Html.DisplayNameFor(model => model.UserName)', required: true, validType: 'length[0,30]' }
            },
            sortable: true,
            resizable: true
          },
          {
            field: 'FullName',
            title: '<span class="required">@Html.DisplayNameFor(model => model.FullName)</span>',
            width: 140,
            editor: {
              type: 'textbox',
              options: { prompt: '@Html.DisplayNameFor(model => model.FullName)', required: true, validType: 'length[0,30]' }
            },
            sortable: true,
            resizable: true
          },
          {
            field: 'Email',
            title: '<span class="required">电子邮件</span>',
            width: 240,
            editor: {
              type: 'textbox',
              options: { prompt: '@Html.DisplayNameFor(model => model.Email)', required: true, validType: ['email', 'length[0,50]'] }
            },
            sortable: true,
            resizable: true
          },
          {
            field: 'CompanyCode',
            title: '@Html.DisplayNameFor(model => model.CompanyCode)',
            width: 180,
            editor: {
              type: 'combogrid', options: {
                prompt: '公司', required: false, validType: 'length[0,50]',
                idField: 'CompanyCode',
                panelWidth: 400,
                textField: 'CompanyName',
                method: 'get',
                url: '/AccountManage/GetCompanyData',
                columns: [[
                  { field: 'CompanyCode', title: '公司代码', width: 80 },
                  { field: 'CompanyName', title: '公司名称', width: 230 },
                  { field: 'Type', title: '类型', width: 80, formatter: accounttypeformatter }
                ]],
                onSelect: function (rowIndex, rowData) {

                  var row = $dg.datagrid('getRows')[editIndex];
                  console.log(row);
                  row.CompanyName = rowData.CompanyName;
                  row.CompanyCode = rowData.CompanyCode;
                  var ed1 = $dg.datagrid('getEditor', { index: editIndex, field: 'AccountType' });
                  $(ed1.target).combobox('setValue', rowData.Type);

                }
              }
            },
            formatter: function (value, row, index) {
              return row.CompanyName
            }
          },
          {
            field: 'AccountType',
            title: '<span class="required">企业类型</span>',
            width: 100,
            align: 'right',
            editor: {

              type: 'accounttypeeditor',
              options: {
                prompt: '@Html.DisplayNameFor(model => model.AccountType)',
                required: true
              }
            },
            formatter: accounttypeformatter
          },
          {
            field: 'PhoneNumber',
            title: '<span class="required">电话号码</span>',
            width: 140,
            editor: {
              type: 'textbox',
              options: { prompt: '@Html.DisplayNameFor(model => model.PhoneNumber)', required: false }
            },
            sortable: true,
            resizable: true
          },
          {
            field: 'AvatarsX50',
            title: '@Html.DisplayNameFor(model => model.AvatarsX50)',
            width: 140,
            editor: {
              type: 'combobox',
              options: {
                prompt: '@Html.DisplayNameFor(model => model.AvatarsX50)',
                required: false,
                method: 'get',
                valueField: 'name',
                textField: 'name',
                panelHeight: 'auto',
                url: '/AccountManage/GetAvatarsX50',
                formatter: function (row) {
                  var imageFile = '/content/img/avatars/' + row.name + ".png";
                  return '<img class="item-img" src="' + imageFile + '"/><span class="item-text">' + row.name + '</span>';
                }
              }
            },
            sortable: true,
            resizable: true
          },
          {
            field: 'EnabledChat',
            title: '<span class="required">@Html.DisplayNameFor(model => model.EnabledChat)</span>',
            width: 120,
            align: 'center',
            editor: {
              type: 'booleaneditor',
              options: {
                prompt: '@Html.DisplayNameFor(model => model.EnabledChat)',
                required: true
              }
            },
            formatter: booleanformatter,
            sortable: true,
            resizable: true
          },
          {
            field: 'IsOnline', title: 'IsOnline', width: 120, formatter: booleanformatter
          },
          {
            field: 'AccessFailedCount', title: 'AccessFailedCount', width: 120
          },
          {
            field: 'LockoutEnabled', title: 'LockoutEnabled', width: 120, formatter: booleanformatter
          },
          {
            field: 'LockoutEndDateUtc', title: 'LockoutEndDateUtc', width: 120
          }
        ]]
      });
        $dg.datagrid('enableFilter');
    });
  </script>


  <script type="text/javascript">
    var $resetForm = {};
    $resetForm = $("#resetpassword-form").validate({

      // Rules for form validation
      rules: {
        rusername: {
          required: true
        },

        rpassword: {
          required: true,
          minlength: 3,
          maxlength: 20
        },
        rpasswordConfirm: {
          required: true,
          minlength: 3,
          maxlength: 20,
          equalTo: '#rpassword'
        }

      },

      // Messages for form validation
      messages: {
        rusername: {
          required: 'Please enter your user name'
        },

        rpassword: {
          required: 'Please enter your password'
        },
        rpasswordConfirm: {
          required: 'Please enter your password one more time',
          equalTo: 'Please enter the same password as above'
        }

      },

      // Do not change code below
      errorPlacement: function (error, element) {
        error.insertAfter(element.parent());
      }
    });


    function showresetform(userid, username) {
      $('#rusername').val(username);
      $('#ruserid').val(userid);
      console.log(userid);
      $('#resetpasswordModal').modal('toggle');
    }
    function setpassword() {
      if ($resetForm.valid()) {
        var id = $('#ruserid').val();
        var password = $('#rpassword').val();
        var url = "/AccountManage/ResetPassword?id=" + id + "&newPassword=" + password;

        $.get(url, function (res) {
          console.log(res);
          if (res.Succeeded) {
            $('#resetpasswordModal').modal('toggle');
          } else {
            $.messager.alert("错误", res.Errors[0])
          }
        });

      }

    }
  </script>
}

